<template>
  <div class="zidingyi">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>自定义事件</span>
        </div>
      </template>
      <p>通过 emits: ['myEvent'] 在组件上定义发出的事件。</p>
      <p>在父组件接收myEvent方法。</p>
      <p>我是父组件，接收来自子组件信息：{{val}}</p>
      <Zidingyi @myEvent="toFun"></Zidingyi>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>自定义事件代码实现</span>
        </div>
      </template>
      <el-divider content-position="left">组件代码,组件名：zidingyi-components</el-divider>
      <textarea style="height: 330px;" disabled>
        -------------------- html区域 --------------------------
        <template>
          <div>我是子组件的自定义组件</div>
          <button @click="myClick">点击我来和父组件通信</button>
        </template>

        -------------------- js区域 --------------------------
        emits: ['myEvent'],
        setup(props, {emit}) {
          const value = ref('')

          function myClick() {
            emit('myEvent', '我从自定义的组件里来的！')
          }

          return {
            value,
            myClick
          }
        }
      </textarea>
      <el-divider content-position="left">调用组件代码</el-divider>
      <textarea style="height: 330px;" disabled>
        -------------------- html区域 --------------------------
        <Zidingyi @myEvent="toFun"></Zidingyi>

        -------------------- js区域 --------------------------
        components: {
          Zidingyi
        },
        setup() {
          let val = ref('')

          function toFun(s) {
            console.log(s)
            val.value = s
          }

          return {
            val,
            toFun
          }
        }
      </textarea>
    </el-card>
  </div>

</template>

<script>
  import {ref} from 'vue'
  import Zidingyi from './zidingyi-components.vue'

  export default {
    name: "zidingyi",
    components: {
      Zidingyi
    },
    setup() {
      let val = ref('')

      function toFun(s) {
        console.log(s)
        val.value = s
      }

      return {
        val,
        toFun
      }
    }
  }
</script>

<style scoped lang="scss">
  .zidingyi {
    line-height: 2;
    textarea {
      width: 100%;
      min-height: 50px;
    }
  }
</style>
